<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/大事件项目/day01/big-events/assets/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/大事件项目/day01/big-events/assets/css/login.css">
    <script src="/大事件项目/day01/04.code/assets/lib/jquery.js"></script>
    <script src="/大事件项目/day01/big-events/assets/lib/layui/layui.all.js"></script>
</head>
<body>
     <!-- 头部的 Logo 区域 -->
     <div class="layui-main">
        <img src="/大事件项目/day01/big-events/assets/images/logo.png" alt="" />
      </div>
  
      <!-- 登录注册区域 -->
      <div class="loginAndRegBox">
        <div class="title-box"></div>
        <!-- 登录得div -->
        <div class="login-box">
              <!-- 登录的表单 -->
    <form class="layui-form" action="" id="formLogin">
        <!-- 用户名 -->
        <div class="layui-form-item">
          <i class="layui-icon layui-icon-username"></i>
          <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" />
        </div>
        <!-- 密码 -->
        <div class="layui-form-item">
          <i class="layui-icon layui-icon-password"></i>
          <input type="password" name="password" required lay-verify="required|pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" />
        </div>
        <!-- 再次确认密码
        <div class="layui-form-item">
            <i class="layui-icon layui-icon-password"></i>
            <input type="password" name="repassword" required lay-verify="required|pwd|repwd" placeholder="再次确认密码" autocomplete="off" class="layui-input" />
          </div> -->

          <!-- 注册 -->
          <div class="layui-form-item">
            <!-- 注意：表单提交按钮和普通按钮的区别，就是 lay-submit 属性 -->
            <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>注册</button>
          </div>


        <!-- 登录按钮 -->
        <div class="layui-form-item">
          <!-- 注意：表单提交按钮和普通按钮的区别，就是 lay-submit 属性 -->
          <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>登录</button>
        </div>
        <div class="layui-form-item links">
            <a href="javascript:;"  id="link_reg">去注册账号</a>
        </div>
        </form>
        </div>
        <!-- 注册得div;默认隐藏 -->
        <div class="reg-box">
            <form class="layui-form" action="#" id="formReg">
              <!-- 用户名 -->
              <div class="layui-form-item">
                <i class="layui-icon layui-icon-username"></i>
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                  class="layui-input" id="username">
              </div>
              <!-- 密码框 -->
              <div class="layui-form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" name="password" required lay-verify="required|pwd" placeholder="请输入密码"
                  autocomplete="off" class="layui-input" id="pwd">
              </div>
              <!-- 确认密码框 -->
              <div class="layui-form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" name="repassword" required lay-verify="required|pwd|repwd" placeholder="再次确认密码"
                  autocomplete="off" class="layui-input">
              </div>
              <!-- 按钮 -->
              <div class="layui-form-item">
                <!-- lay-submit属性 提交功能的按钮 -->
                <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="formDemo"
                  id="form_reg">注册</button>
              </div>
              <!-- 点击切换的链接 -->
              <div class="layui-form-item links">
                <a href="javascript:;" id="link_login">去登录</a>
              </div>
            </form>
          </div>
        </div>
        <script src="/大事件项目/day01/big-events/assets/js/baseAPI.js"></script>
      <!-- <script src="/大事件项目/day01/big-events/assets/js/login2.js"></script> -->

      <script>
        $(function(){
            $('#link_reg').on('click',function(){
                $('.login-box').hide()
                $('.reg-box').show()
            })

            $('#link_login').on('click',function(){
                $('.login-box').show()
                $('.reg-box').hide()
            })


            var form = layui.form
  var layer = layui.layer
  // 通过 form.verify() 函数自定义校验规则
  form.verify({
    // 自定义了一个叫做 pwd 校验规则
    pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
    // 校验两次密码是否一致的规则
    repwd: function(value) {
      // 通过形参拿到的是确认密码框中的内容
      // 还需要拿到密码框中的内容
      // 然后进行一次等于的判断
      // 如果判断失败,则return一个提示消息即可
      var pwd = $('.reg-box [name=password]').val()
      if (pwd !== value) {
        return '两次密码不一致！'
      }
    }
  })

            //封装一个注册函数
            function zhuce(){
                $('#formReg').on('submit',function(e){
                    e.preventDefault()
                    const data={
                        username:$('#username').val(),
                        password:$('#password').val()
                    }
                    $.post(
                        '/api/reguser',
                        data,
                        function(res){
                            if (res.status !== 0) {
                                return layer.msg(res.message)
                            }
                        }
                    )
                })
            }
        })

      </script>
</body>
</html>